<template>
    <div :class="{ 'dark-mode': isDark }" class="app-center">
        <!-- 导航栏 -->
        <el-header class="header">
            <div class="container">
                <h1 class="title">应用中心</h1>
                <!-- <el-switch v-model="isDark" active-text="暗黑模式" inactive-text="明亮模式" @change="toggleDarkMode" /> -->
            </div>
        </el-header>

        <!-- 应用列表 -->
        <el-main class="main">
            <el-row :gutter="20" class="app-list">
                <el-col v-for="(app, index) in sortedApps" :key="index" :xs="24" :sm="12" :md="8" :lg="4.8">
                    <el-card class="app-card" shadow="hover">
                        <div class="app-content">
                            <div class="app-header">
                                <el-avatar shape="square" :size="60" :src="app.icon" fit="cover" />
                                <div class="app-info">
                                    <h3 class="app-name">{{ app.name }}</h3>
                                    <el-tag type="info" size="small">{{ changeTpyeTag(app.category) }}</el-tag>
                                </div>
                            </div>
                            <p class="app-desc">{{ app.description }}</p>
                            <div class="app-footer">
                                <span class="version">版本: {{ app.version }}</span>
                                <span class="update-date">更新于 {{ formatDate(app.updateDate) }}</span>
                                <div class="button-group">
                                    <el-button type="primary" size="small" @click="download(app)">下载</el-button>
                                    <el-button type="success" size="small" @click="copyLink(app)">复制链接</el-button>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </div>
</template>
  
<script setup>
import { ref, reactive, computed } from 'vue'
import { commonMessage } from "@/utils/index.js";
import { $_getapp } from "@/api/yh.js";

const tpyeTag = [
    { label: '收银', value: 'cashier' }
]

// 暗黑模式状态
const isDark = ref(localStorage.getItem('darkMode') === 'true' || false)

// 切换暗黑模式
const toggleDarkMode = () => {
    localStorage.setItem('darkMode', isDark.value)
    document.documentElement.classList.toggle('dark', isDark.value)
}

// 应用数据
const apps = reactive([])


const getApps = () => {
    $_getapp().then(res => {
        Object.assign(apps, res.result);
    })
}
getApps()
// 下载处理
const download = (app) => {
    if (!app.link) {
        commonMessage('下载链接无效', 'error');
        return;
    }
    const link = document.createElement('a');
    link.href = app.link;
    link.download = app.name + '.apk';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// 复制链接处理
const copyLink = (app) => {
    const link = app.link
    console.log(link, '复制链接处理...');
    //复制
    navigator.clipboard.writeText(link)
        .then(() => {
            commonMessage('链接已复制到剪贴板')
        })
        .catch(() => {
            commonMessage('复制链接失败', 'error')
        })
}

// 格式化日期
const formatDate = (dateString) => {
    const date = new Date(dateString)
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

// 排序应用
const sortedApps = computed(() => {
    return [...apps].sort((a, b) =>
        new Date(b.updateDate) - new Date(a.updateDate)
    )
})



// tpyeTag
const changeTpyeTag = (value) => {
    const matchedTag = tpyeTag.find(item => item.value === value);
    return matchedTag ? matchedTag.label : '未知类型'; 
}

</script>
  
<style scoped>
.app-center {
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
}

/* 明亮模式 */
.app-center {
    background: #f5f7fa;
    color: #303133;
}

/* 暗黑模式 */
.app-center.dark-mode {
    background: #141414;
    color: #e5eaf3;
}

/* 导航栏 */
.header {
    background: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color);
}

.container {
    /* max-width: 1200px; */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.title {
    font-size: 24px;
    margin: 0;
}

/* 应用卡片 */
.app-list {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 20px;
}

.app-card {
    margin-bottom: 20px;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    background: var(--el-bg-color);
}

.app-card:hover {
    transform: translateY(-5px);
    background: var(--el-color-primary-light-9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.app-content {
    padding: 15px;
}

.app-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.app-info {
    margin-left: 15px;
}

.app-name {
    margin: 0 0 8px 0;
    font-size: 16px;
}

.app-desc {
    font-size: 14px;
    color: var(--el-text-color-regular);
    margin-bottom: 15px;
}

.app-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button-group {
    display: flex;
    gap: 8px;
}

.version {
    font-size: 12px;
    color: var(--el-text-color-secondary);
}

.update-date {
    font-size: 12px;
    color: var(--el-text-color-secondary);
    opacity: 0.8;
}

.el-avatar {
    border-radius: 8px;
}

.el-header {
    display: flex;
    align-items: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .update-date {
        font-size: 9px;
    }

    .app-card {
        margin-bottom: 15px;
    }

    .app-name {
        font-size: 14px;
    }
}

/* 响应式调整 */
@media (max-width: 1260px) {
    .app-footer {
        flex-direction: column;
        /* 垂直排列 */
        align-items: flex-start;
        /* 左对齐 */
        gap: 8px;
        /* 增加间距 */
    }

    .button-group {
        width: 100%;
        /* 按钮组占满宽度 */
        justify-content: space-between;
        /* 按钮均匀分布 */
    }

    .version,
    .update-date {
        font-size: 12px;
        /* 缩小字体 */
    }

    .el-button {
        font-size: 12px;
        /* 缩小按钮字体 */
        padding: 6px 12px;
        /* 调整按钮内边距 */
    }
}
</style>